<template lang="html">
  <div>
    <selfHeader></selfHeader>
    <div class="car">

      <mt-field label="手机号" placeholder="请输入手机号" v-model="from.account">
        <button @click="sendCode">发送验证码</button>
        <span v-show="!show" class="count">{{count}} s</span>
      </mt-field>
      <mt-field label="验证码" placeholder="请输入验证码" v-model="from.captcha"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" v-model="from.password"></mt-field>
      <button class="btn" @click='editPwd'>修改</button>
    </div>
  </div>
</template>

<script>
import {editPwd, appSendCode} from '@/http/api'
import Baseline from '@/common/_baseline.vue'
import {Toast, Field} from 'mint-ui'
import selfHeader from '@/common/header'

export default {
  components: {
    'v-baseline': Baseline,
    Field,
    selfHeader
  },
  data() {
    return {
      from: {
        account: '',
        captcha: '',
        password: '',
      },
      show: true,
      count: '',
      timer: null,
    }
  },
  created() {
  },
  methods: {
    // 登录按钮
    async sendCode() {
      const parmas = {
        phone: this.from.account
      }
      const res = await appSendCode(parmas)
      if (res.code * 1 === 200) {
        this.getCode()
      }
      Toast(res.message)
    },

    getCode(){
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },

    async editPwd() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid,
        account: this.from.account,
        captcha: this.from.captcha,
        password: this.from.password
      }
      const res = await editPwd(data)
      if (res.code * 1 === 200) {
        Toast('密码修改成功');
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';
.car{
  margin-top: 60px;
}
</style>
